<template>
  <div class="theme-switch">
    <!-- 暗黑模式切换 -->
    <el-switch
      v-model="isDark"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      @change="toggleDark"
    />

    <!-- 主题色选择 -->
    <el-color-picker
      v-model="primaryColor"
      :predefine="predefineColors"
      size="small"
      @change="setPrimaryColor"
    />
  </div>
</template>

<script setup lang="ts">
  import { useAppStore } from '@/store';
  import { Moon, Sunny } from '@element-plus/icons-vue';
  import { ref, watch } from 'vue';

  const appStore = useAppStore();

  // 暗黑模式
  const isDark = ref(appStore.isDark);
  const toggleDark = () => {
    appStore.toggleDark();
  };

  // 主题色
  const primaryColor = ref(appStore.primaryColor);
  const predefineColors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];

  const setPrimaryColor = (value: string | null) => {
    if (value) {
      appStore.setPrimaryColor(value);
    }
  };

  // 监听主题变化
  watch(
    () => appStore.isDark,
    (value) => {
      isDark.value = value;
    }
  );

  watch(
    () => appStore.primaryColor,
    (value) => {
      primaryColor.value = value;
    }
  );
</script>

<style scoped lang="scss">
  .theme-switch {
    display: flex;
    align-items: center;
    gap: 16px;

    :deep(.el-color-picker) {
      --el-color-picker-size: 24px;
    }
  }
</style>
